<template>
  <div>
    <div class="hasTagsView">
      <div class="LeftView">
        <h4>库区选择</h4>
        <div>
          <el-select v-model="SelData" style="width: 100%">
            <el-option v-for="(item,index) in AllWarehouse" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="BoxtoBox">
          <el-input v-model="InputData" placeholder="请输入库区名称" suffix-icon="el-icon-search" @input="InputChange" />
          <el-scrollbar style="height: 90%;  overflow: hidden; position: relative;">
            <div class="Btn">
              <el-button v-for="(item,index) in AllReservoirData" :key="index" @click="Toggle(item)">{{ item.name }}</el-button>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="RightView" style="width: 100%;">
        <div class="RightBox">
          <div class="CKall">库区总览
          </div>
          <div class="CkMore" style="display: flex;">
            <span style="margin-right: 43px;">库存总计: {{  AlloverviewData.total }}</span>
            <span style="margin-right: 43px;"><div style="background-color: rgb(195, 195, 195);width: 12px;height: 12px;border-radius: 3px; display: inline-block;margin-right: 5px;" />停用库位:{{ AlloverviewData.stop }}</span>
            <span style="margin-right: 43px;"><div style="background-color: rgb(0, 190, 118);width: 12px;height: 12px;border-radius: 3px; display: inline-block;margin-right: 5px;" />占用库位:{{  AlloverviewData.use }}</span>
            <span style="margin-right: 43px;"><div style="background-color: rgb(178, 220, 204);width: 12px;height: 12px;border-radius: 3px; display: inline-block;margin-right: 5px;" />空闲库位:{{  AlloverviewData.free }}</span>
          </div>
        </div>
        <div class="Box">
          <div
            v-for="(index, item) in AlloverviewData.stop"
            :key="item"
            class="BOX"
            style="background-color: rgb(195, 195, 195)"
          />
          <div
            v-for="(index) in AlloverviewData.use"
            :key="index"
            class="BOX"
            style="background-color: rgb(0, 190, 118)"
          />
          <div
            v-for="(index, item) in AlloverviewData.free"
            :key="item + index"
            class="BOX"
            style="background-color: rgb(178, 220, 204)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { AllReservoir, GetAllWarehouseList, Alloverview } from '@/api'
export default {
  data() {
    return {
      SelData: '',
      InputData: '',
      AllWarehouse: [],
      AllReservoirData: [],
      AlloverviewData: []
    }
  },
  watch: {
    SelData() {
      this.AllReservoirFn()
    }
  },
  async created() {
    const res = await GetAllWarehouseList({ status: 1 })
    this.SelData = res.data.data[0].id
    this.AllWarehouse = res.data.data
    this.AllReservoirFn()
    console.log(new Date(1))
  },
  methods: {
    async AllReservoirFn() {
      const res = await AllReservoir({ status: 1, warehouseId: this.SelData, like_name: this.InputData })
      this.AllReservoirData = res.data.data
    },
    async Toggle(item) {
      const res = await Alloverview(item.id)
      this.AlloverviewData = res.data.data
    },
    InputChange() {
      this.AllReservoirFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.hasTagsView {
  display: flex;
  min-height: calc(100vh - 125px);
  margin:30px;
  background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .LeftView{
      width: 263px;
      height: calc(100vh - 125px);
      padding: 5px 26px 27px 20px;
      background-color: #ffffff;
      box-shadow: 0 0 15px 0 rgb(144 142 142 / 17%);
      z-index:999;
      h4{
        font-weight: 400;
      }
      .BoxtoBox{
        padding:20px;
        padding-top:30px;
        margin-top: 15px;
        background-color: #fdfcf9;
        border:1px solid #ecebe7;
        border-radius:5px;
        width: 100%;
        height: 345px;
        overflow: hidden;
      }
      .Btn{

      .el-button{
        width: 140px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
    margin: 0 auto;
    margin-top: 20px;
    font-size: 13px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #ffb200;
    cursor: pointer;
    &:focus{
      background-color: #ffb200;
      color:#333;
    }
  }
}
}
.RightView{
  padding:20px;
}
    .RightBox{
      display:flex;
      width: 100%;
      padding:10px;
      background-color: #ffffff;
      .CKall {
        width: 64px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC,PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #332929;
        line-height: 22px;
        // float: left;
        margin-right: 103px;
      }
    }
}
::v-deep .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
    overflow-x: hidden!important;
    padding-right: 20px;
}
.Box{
  width: 100%;
    height: calc(100% - 43px);
    overflow-y: auto;
    display: flex;
    .BOX{
      width: 36px;
    height: 36px;
    border-radius: 7px;
    margin: 6px;
    background-color: pink;
    &:hover{
      border: 3px solid #008a56;
    }
    }
}
</style>
